<template>
    <div class="amend">
      <img class="icon" src="https://iconfont.alicdn.com/p/illus/preview_image/Nvp39a3xYW86/571de53a-a968-4992-bcd9-38dd005d71a1.png" alt="">
      <el-breadcrumb :separator-icon="ArrowRight">
    <!-- <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item> -->
    <!-- <el-breadcrumb-item >库存管理</el-breadcrumb-item> -->
    <el-breadcrumb-item :to="{ path:'/index/stock' }">库存总览</el-breadcrumb-item>
    <el-breadcrumb-item :to="{ path:'/index/mo-search' }">库存查询</el-breadcrumb-item>
    <el-breadcrumb-item :to="{ path:'/index/amend' }">库存更改</el-breadcrumb-item>
    <el-breadcrumb-item :to="{ path:'/index/addmounted' }">新增商品库存</el-breadcrumb-item>
    <el-breadcrumb-item :to="{ path: '/index/hint' }"
        >急需补货提示</el-breadcrumb-item
      >
    </el-breadcrumb>

        <h1 class="h1">编辑商品库存修订</h1>
      
        <el-radio-group v-model="labelPosition" label="label position">
    <el-radio-button label="left">Left</el-radio-button>
    <el-radio-button label="right">Right</el-radio-button>
    <el-radio-button label="top">Top</el-radio-button>
  </el-radio-group>
  <div style="margin: 20px" />
  <el-form
    :label-position="labelPosition"
    label-width="100px"
    :model="ruleFormRef"
    style="max-width: 460px"
  >
    <el-form-item label="商品名">
      <el-input v-model="formLabelAlign .goodsname" />
    </el-form-item>
    <el-form-item label="商品库存">
      <el-input v-model="formLabelAlign .goodsamount" />
    </el-form-item>
    <el-form-item label="最大库存">
      <el-input v-model="formLabelAlign .maxamount" />
    </el-form-item>
  </el-form>  
  <el-form-item>
      <!-- <el-button type="primary" @click="submitForm(formRef)">确定</el-button> -->
      <el-button :plain="true" @click="submitForm(formRef)">确定</el-button>
      <el-button @click="resetForm(formRef)">清空</el-button>
    </el-form-item>
   
    </div>
    
    
</template>

<script setup >
import { reactive, ref } from 'vue';
import axios from 'axios';
import { useRoute,useRouter } from 'vue-router'
import {user_amends, } from '../../../utils/api'

// 接收传过来的参数（path+query）
var $router = useRouter();
var $route = useRoute();
var ruleFormRef = $route.query;
// console.log(ruleFormRef);

// 表单
var labelPosition = ref('right')
// 表单中的数据
var formLabelAlign  = reactive({
    goodsname: '',
    goodsamount: '',
    maxamount: '',
    goodsid:'',
})
formLabelAlign.goodsname = ruleFormRef.goodsname;
formLabelAlign.goodsamount = ruleFormRef.goodsamount;
formLabelAlign.maxamount = ruleFormRef.maxamount;
formLabelAlign.goodsid  = ruleFormRef.goodsid;
// 确定修改货物库存
var submitForm = function(){
    // console.log('submitForm')
    // console.log(formLabelAlign)
    user_amends({obj:formLabelAlign}).then((res)=>{
      console.log(res);
      $router.push('/index/stock')

      ElMessage({
      message: '商品库存修改成功。',
      type: 'success',
    })
    })

}
var resetForm = function(){
    // console.log('resetForm')
    formLabelAlign.goodsname = ''
    formLabelAlign.goodsamount = ''
    formLabelAlign.maxamount = ''
}
// 
</script>

<style scoped>
.amend{
  position: relative;
}
.icon{
  position: absolute;
  top: 30px;
  right: 800px;
  width: 100px;
  height: 100px; 
}
.h1{
  margin: 25px;
}
   
</style>